"use client";
import {
    ClockCircleTwoTone,
    ContainerTwoTone,
    SnippetsTwoTone,
} from "@ant-design/icons";
import { Button, Card, Checkbox, Pagination, Table } from "antd";
import { memo, useState } from "react";
import "./index.css";

interface BrushQuestionItem {
    id: number;
    title: string;
    type: string;
    completionTime: string;
    score: number;
}

interface ErrorQuestionItem {
    key: string;
    question: string;
    knowledge: string;
    from: string;
}

const BrushQuestion: React.FC = () => {
    const [currentKey, setCurrentKey] = useState("tab1");
    const [lookFinish, setLookFinish] = useState(false);
    const [pageIndex, setPageIndex] = useState(1);
    const total = 9;

    const tabList = [
        {
            key: "tab1",
            tab: "试卷",
        },
        {
            key: "tab2",
            tab: "错题集",
        },
    ];

    const columns = [
        {
            title: "题目",
            dataIndex: "question",
            key: "question",
            render: (text: string) => <a>{text}</a>,
        },
        {
            title: "知识点",
            dataIndex: "knowledge",
            key: "knowledge",
        },
        {
            title: "来自",
            dataIndex: "from",
            key: "from",
        },
        {
            title: () => (
                <Checkbox onChange={onLookErrorChange}>只看已完成的</Checkbox>
            ),
            key: "tags",
            dataIndex: "tags",
            render: () => <Button type="primary">查看详情</Button>,
        },
    ];

    const mockData: ErrorQuestionItem[] = [
        {
            key: "1",
            question: "在哈希法存储中，冲突指的是 （ ）",
            knowledge: "哈希",
            from: "考卷1",
        },
        {
            key: "2",
            question: "在深度为5的满二叉树中，结点的个数为多少个？",
            knowledge: "树",
            from: "考卷2",
        },
    ];

    const mockBrushData: BrushQuestionItem[] = Array(8)
        .fill(null)
        .map((_, index) => ({
            id: index + 1,
            title: "计算机专业技能-网络基础专项练习",
            type: "专项练习",
            completionTime: "2021-12-13",
            score: 0,
        }));

    const onTabChange = (key: string) => {
        setCurrentKey(key);
    };

    const onLookChange = () => {
        setLookFinish(true);
    };

    const onLookErrorChange = (e: any) => {
        console.log("----", e.target.checked);
    };

    const handleNext = () => {
        console.log("再做一次");
    };

    const handleLook = () => {
        console.log("查看详情");
    };

    const onChangePagination = (page: number) => {
        setPageIndex(page);
    };

    return (
        <div className="brush-question-component">
            <Card
                style={{ width: "100%" }}
                tabList={tabList}
                bordered={false}
                activeTabKey={currentKey}
                onTabChange={onTabChange}
            >
                {currentKey === "tab1" && (
                    <div>
                        <div className="brush-question-component-tab1-head">
                            <div className="brush-question-component-tab1-head-title">
                                <div className="brush-question-component-tab1-head-title-icon">
                                    <SnippetsTwoTone twoToneColor="#FF0000" />
                                </div>
                                <div>练习的试卷（21）</div>
                            </div>
                            <div className="brush-question-component-tab1-head-filter">
                                <Checkbox onChange={onLookChange}>
                                    只看已完成的
                                </Checkbox>
                            </div>
                        </div>
                        <div className="brush-question-component-tab1-body">
                            <div style={{ display: "flex", flexWrap: "wrap" }}>
                                {mockBrushData.map((item) => (
                                    <div
                                        key={item.id}
                                        className="brush-question-component-tab1-body-item"
                                    >
                                        <div
                                            style={{
                                                backgroundColor:
                                                    "rgb(234, 235, 236)",
                                            }}
                                        >
                                            <div className="brush-question-component-tab1-body-label">
                                                {item.type}
                                            </div>
                                            <div className="brush-question-component-tab1-body-item-title">
                                                {item.title}
                                            </div>
                                        </div>
                                        <div className="brush-question-component-tab1-body-item-content">
                                            <div className="brush-question-component-tab1-body-item-content-icon">
                                                <ClockCircleTwoTone twoToneColor="#AAAAAA" />
                                            </div>
                                            <div>
                                                完成时间：{item.completionTime}
                                            </div>
                                        </div>
                                        <div className="brush-question-component-tab1-body-item-content">
                                            <div className="brush-question-component-tab1-body-item-content-icon">
                                                <ContainerTwoTone twoToneColor="#AAAAAA" />
                                            </div>
                                            <div>得分：{item.score}</div>
                                        </div>
                                        <div className="brush-question-component-tab1-body-item-footer">
                                            <div
                                                className="brush-question-component-tab1-body-item-footer-button"
                                                onClick={handleNext}
                                            >
                                                再做一次
                                            </div>
                                            <div
                                                className="brush-question-component-tab1-body-item-footer-button"
                                                onClick={handleLook}
                                            >
                                                查看详情
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>

                            <div className="brush-question-component-tab1-page">
                                {total > 8 && (
                                    <Pagination
                                        style={{
                                            padding: "24px 0",
                                            textAlign: "center",
                                        }}
                                        showQuickJumper
                                        current={pageIndex}
                                        defaultCurrent={1}
                                        total={total}
                                        defaultPageSize={8}
                                        onChange={onChangePagination}
                                    />
                                )}
                            </div>
                        </div>
                    </div>
                )}
                {currentKey === "tab2" && (
                    <div>
                        <div className="brush-question-component-tab2-head">
                            <div className="brush-question-component-tab2-head-title">
                                <div className="brush-question-component-tab2-head-title-icon">
                                    <SnippetsTwoTone twoToneColor="#FF0000" />
                                </div>
                                <div>历史错题总数（21）</div>
                            </div>
                            <div className="brush-question-component-tab2-head-button">
                                <Button type="primary">错题组卷练习</Button>
                            </div>
                        </div>
                        <div className="brush-question-component-tab2-body">
                            <Table columns={columns} dataSource={mockData} />
                        </div>
                    </div>
                )}
            </Card>
        </div>
    );
};

export default memo(BrushQuestion);
